<template>
  <div class="upload-examples">
    <el-card>
      <template #header>
        <h3>文件上传组件使用示例</h3>
      </template>
      
      <el-row :gutter="24">
        <!-- 图片上传示例 -->
        <el-col :span="12">
          <h4>图片上传</h4>
          <FileUpload
            v-model="imageUrl"
            type="image"
            :show-tip="true"
            @success="handleImageSuccess"
          />
          <p v-if="imageUrl">当前图片URL: {{ imageUrl }}</p>
        </el-col>
        
        <!-- 多图片上传示例 -->
        <el-col :span="12">
          <h4>多图片上传</h4>
          <FileUpload
            v-model="imageUrls"
            type="image"
            :multiple="true"
            :show-file-list="true"
            @success="handleMultiImageSuccess"
          />
          <p v-if="imageUrls.length">已上传 {{ imageUrls.length }} 张图片</p>
        </el-col>
      </el-row>
      
      <el-divider />
      
      <el-row :gutter="24">
        <!-- 文档上传示例 -->
        <el-col :span="12">
          <h4>文档上传</h4>
          <FileUpload
            v-model="documentUrl"
            type="document"
            upload-text="选择文档"
            @success="handleDocumentSuccess"
          />
          <p v-if="documentUrl">当前文档URL: {{ documentUrl }}</p>
        </el-col>
        
        <!-- 拖拽上传示例 -->
        <el-col :span="12">
          <h4>拖拽上传</h4>
          <FileUpload
            v-model="dragFileUrl"
            :drag="true"
            :multiple="true"
            upload-text="拖拽文件到此处"
            @success="handleDragSuccess"
          />
          <p v-if="Array.isArray(dragFileUrl) && dragFileUrl.length">
            已上传 {{ dragFileUrl.length }} 个文件
          </p>
        </el-col>
      </el-row>
      
      <el-divider />
      
      <el-row :gutter="24">
        <!-- 自定义验证示例 -->
        <el-col :span="12">
          <h4>自定义验证（只允许PDF，最大2MB）</h4>
          <FileUpload
            v-model="pdfUrl"
            :allowed-types="['application/pdf']"
            :max-size="2"
            upload-text="选择PDF文件"
            :custom-validation="customPdfValidation"
            @success="handlePdfSuccess"
          />
          <p v-if="pdfUrl">当前PDF URL: {{ pdfUrl }}</p>
        </el-col>
        
        <!-- 视频上传示例 -->
        <el-col :span="12">
          <h4>视频上传</h4>
          <FileUpload
            v-model="videoUrl"
            type="video"
            upload-text="选择视频文件"
            @success="handleVideoSuccess"
          />
          <p v-if="videoUrl">当前视频URL: {{ videoUrl }}</p>
        </el-col>
      </el-row>
      
      <el-divider />
      
      <!-- 当前配置信息 -->
      <el-card>
        <template #header>
          <h4>当前上传配置</h4>
        </template>
        
        <el-descriptions :column="2" border>
          <el-descriptions-item label="图片大小限制">{{ FILE_SIZE_LIMITS.IMAGE }}MB</el-descriptions-item>
          <el-descriptions-item label="文档大小限制">{{ FILE_SIZE_LIMITS.DOCUMENT }}MB</el-descriptions-item>
          <el-descriptions-item label="视频大小限制">{{ FILE_SIZE_LIMITS.VIDEO }}MB</el-descriptions-item>
          <el-descriptions-item label="音频大小限制">{{ FILE_SIZE_LIMITS.AUDIO }}MB</el-descriptions-item>
          <el-descriptions-item label="通用文件限制">{{ FILE_SIZE_LIMITS.GENERAL }}MB</el-descriptions-item>
        </el-descriptions>
      </el-card>
      
      <!-- 操作按钮 -->
      <div style="margin-top: 20px; text-align: center;">
        <el-button @click="clearAllFiles">清空所有文件</el-button>
        <el-button type="primary" @click="showCurrentValues">显示当前值</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import FileUpload from '@/components/FileUpload.vue'
import { FILE_SIZE_LIMITS } from '@/config/upload'

// 响应式数据
const imageUrl = ref('')
const imageUrls = ref<string[]>([])
const documentUrl = ref('')
const dragFileUrl = ref<string[]>([])
const pdfUrl = ref('')
const videoUrl = ref('')

// 事件处理
const handleImageSuccess = (response: any, file: File) => {
  console.log('图片上传成功:', response, file)
  ElMessage.success(`图片 ${file.name} 上传成功`)
}

const handleMultiImageSuccess = (response: any, file: File) => {
  console.log('多图片上传成功:', response, file)
  ElMessage.success(`图片 ${file.name} 上传成功`)
}

const handleDocumentSuccess = (response: any, file: File) => {
  console.log('文档上传成功:', response, file)
  ElMessage.success(`文档 ${file.name} 上传成功`)
}

const handleDragSuccess = (response: any, file: File) => {
  console.log('拖拽文件上传成功:', response, file)
  ElMessage.success(`文件 ${file.name} 上传成功`)
}

const handlePdfSuccess = (response: any, file: File) => {
  console.log('PDF上传成功:', response, file)
  ElMessage.success(`PDF ${file.name} 上传成功`)
}

const handleVideoSuccess = (response: any, file: File) => {
  console.log('视频上传成功:', response, file)
  ElMessage.success(`视频 ${file.name} 上传成功`)
}

// 自定义验证函数
const customPdfValidation = (file: File) => {
  if (file.type !== 'application/pdf') {
    return { valid: false, error: '只能上传PDF文件' }
  }
  
  if (file.name.includes('test')) {
    return { valid: false, error: '文件名不能包含"test"' }
  }
  
  return { valid: true }
}

// 操作方法
const clearAllFiles = () => {
  imageUrl.value = ''
  imageUrls.value = []
  documentUrl.value = ''
  dragFileUrl.value = []
  pdfUrl.value = ''
  videoUrl.value = ''
  ElMessage.success('已清空所有文件')
}

const showCurrentValues = () => {
  const values = {
    imageUrl: imageUrl.value,
    imageUrls: imageUrls.value,
    documentUrl: documentUrl.value,
    dragFileUrl: dragFileUrl.value,
    pdfUrl: pdfUrl.value,
    videoUrl: videoUrl.value
  }
  
  console.log('当前所有文件值:', values)
  ElMessage.info('请查看控制台输出')
}
</script>

<style scoped lang="scss">
.upload-examples {
  padding: 20px;
  
  h4 {
    margin: 0 0 16px 0;
    color: #303133;
    font-size: 16px;
    font-weight: 600;
  }
  
  p {
    margin: 8px 0;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }
  
  .el-divider {
    margin: 32px 0;
  }
}
</style>
